<script setup>
import useChannel from '@/store/channel'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { getUserList } from '@/assets/api/user'
import { ElMessage } from 'element-plus'
import logo from '@/assets/image/logo.png'

const props = defineProps({})

const emit = defineEmits(['checkChange', 'submit'])

defineExpose({
  open,
})

const channelStore = useChannel()

const searchValue = ref('')

const userList = ref([])

const filterChannelList = computed(() => {
  const channelList = channelStore.channelList
    .filter((i) => i.type !== 1)
    .map((i) => {
      return {
        ...i,
        // 1-频道；2-用户
        dataType: 1,
      }
    })
  return channelList.concat(userList.value).filter((i) => i.name && i.name.includes(searchValue.value))
})

const messageRemark = ref('')

const checkedList = ref([])

function checked(item) {
  const index = checkedList.value.findIndex((i) => i.id === item.id)
  if (index > -1) {
    checkedList.value.splice(index, 1)
  } else {
    checkedList.value.push(item)
  }
  emit('checkChange', checkedList.value)
}

const visible = ref(false)

function submit() {
  emit('submit', messageRemark.value, checkedList.value)
  visible.value = false
}

function getUserListData() {
  getUserList().then((res) => {
    if (res.code === 200) {
      userList.value = res.rows.map((i) => {
        return {
          ...i,
          id: i.userId,
          name: i.nickName,
          // 1-频道；2-用户
          dataType: 2,
        }
      })
    } else {
      ElMessage.error(res.msg)
    }
  })
}

function open() {
  getUserListData()
  visible.value = true
}

function close() {
  messageRemark.value = ''
  checkedList.value = []
  userList.value = []
}
</script>

<template>
  <TaskChatDialog v-model="visible" title="选择频道" width="700" @close="close">
    <div class="channel-select">
      <div class="channel-list">
        <el-input class="search-input" v-model="searchValue" placeholder="频道名称"></el-input>
        <div class="channel-list-body">
          <div class="channel" v-for="(item, index) in filterChannelList" :key="index" @click="checked(item)">
            <el-checkbox :model-value="checkedList.map((i) => i.id).includes(item.id)"></el-checkbox>
            <div class="channel-icon">
              <SvgIcon :src="item.icon" name="logo" size="35" :default-img="logo" circle></SvgIcon>
            </div>
            <div class="channel-name text-overflow-ellipsis" :title="item.name">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="selected-channel">
        <div class="channel-list">
          <div class="selected-total">已选择{{ checkedList.length }}</div>
          <div class="selected-scroll">
            <div v-for="item in checkedList" :key="item.id" @click="checked(item)">
              {{ item.name }}
              <el-icon><CircleCloseFilled /></el-icon>
            </div>
          </div>
        </div>
        <div class="message-remark">
          <el-input v-model="messageRemark" type="textarea" :rows="4" resize="none" placeholder="留言"></el-input>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit" :disabled="!checkedList.length">确定</el-button>
    </template>
  </TaskChatDialog>
</template>

<style scoped lang="scss">
.channel-select {
  @include use-flex();
  .channel-list {
    flex: 1;
    padding: 0 10px;
    .channel-list-body {
      height: 400px;
      overflow: hidden auto;
      .channel {
        cursor: pointer;
        @include use-flex(center);
        padding: 5px 10px;
        border-radius: 8px;
        &:hover {
          background-color: var(--elp-bg-color-page);
        }
        .channel-icon {
          display: flex;
          padding: 0 10px;
        }
        .channel-name {
          width: 200px;
        }
      }
    }
    .search-input {
      margin-bottom: 10px;
    }
  }
  .selected-channel {
    @include use-flex(normal, normal, column);
    width: 350px;
    padding: 0 10px;
    border-left: var(--elp-border);
    .channel-list {
      flex: 1;
      .selected-total {
        font-size: 16px;
        padding: 4px 0;
      }
      .selected-scroll {
        display: flex;
        flex-wrap: wrap;
        padding: 5px 0;
        & > div {
          @include use-flex(center);
          cursor: pointer;
          padding: 3px 5px;
          border-radius: 4px;
          background-color: var(--elp-color-info-light-9);
          margin-bottom: 10px;
          margin-right: 10px;
          &:hover {
            background-color: var(--elp-color-info-light-8);
          }
          .elp-icon {
            color: var(--elp-text-color-secondary);
            margin-left: 5px;
          }
        }
      }
    }
    .message-remark {
    }
  }
}
</style>
